<div class="ui-g" style="height: 100%;">
    <div class="ui-g-12" style="padding: 0px;">
        <div class="ui-g-12" style="padding: 3px;">
            <p-tabView (onChange)="onTaskListTabChange($event)">
                <p-tabPanel [header]="tasklist.taskListName" [leftIcon]="tasklist.displayIcon"
                    *ngFor="let tasklist of tasklists; let i = index" [selected]="i == 0">
                </p-tabPanel>
            </p-tabView>
        </div>
        <div class="ui-g-12 trans-tasklist-fields" style="padding: 3px;">
            <div class="ui-g-12 trans-tasklist-menu border-spe-bottom">
                <!--  Menu Group -->
                <tasklist-menu [selectedRecord]="selectedRecord" [parentObj]="self" [parentCallback]="callback">
                </tasklist-menu>
            </div>
            <!--  Search Field Group -->
            <div class="ui-g ui-g-10">
                <tasklist-search-task [(searchFields)]="searchFields"></tasklist-search-task>
            </div>
            <div class="ui-g ui-g-2 ui-fluid condition-search-button" *ngIf="searchFields && searchFields.length > 0">
                <div class="ui-g-6" style="width: auto">
                    <button pButton type="button" label="重置" (click)="reset()" icon="fa fa-mail-reply"
                        class="ui-button-raised ui-button-danger" style="height:30px;"></button>
                </div>
                <div class="ui-g-6" style="width: auto">
                    <button pButton type="button" label="查询" (click)="searchTaskListData()" icon="fa fa-search"
                        class="ui-button-raised ui-button-info" style="height:30px;background-color: #007ad9"></button>
                </div>
            </div>
        </div>
        <div class="ui-g-12" style="padding: 0px;">
            <!-- Task List Table -->
            <p-table [value]="records" [columns]="cols" selectionMode="multiple" [resizableColumns]="true"
                (sortFunction)="customSort()" [metaKeySelection]="true" [customSort]="true" [scrollable]="true"
                [scrollHeight]="scrollHeight" [rows]="pageSize" [(selection)]="selectedRecord" [lazy]="true"
                (onLazyLoad)="loadLazy($event)" [paginator]="showPaginator" [totalRecords]="totalRecords"
                [responsive]="true" [loading]="loading" (onRowSelect)="onRowSelect($event)"
                [style]="{'width':'100%', 'margin-left':'-1px'}">
                <ng-template pTemplate="colgroup" let-columns>
                    <colgroup>
                        <col *ngFor="let col of columns" [ngStyle]="{'width': col.fieldWidth + 'px'}">
                    </colgroup>
                </ng-template>
                <ng-template pTemplate="header" let-columns>
                    <tr>
                        <th *ngFor="let col of columns"
                            [ngStyle]="{'white-space':'nowrap','width': col.fieldWidth + 'px', 'text-align': 'center'}"
                            [pSortableColumn]="col.columnName" pResizableColumn>
                            {{col.fieldName}}
                            <p-sortIcon [field]="col.columnName"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns">
                    <tr [pSelectableRow]="rowData" style="white-space: nowrap">
                        <td *ngFor="let col of columns" class="ui-resizable-column"
                        [ngStyle]="{'white-space':'nowrap','background-color': rowData['background_color'], 'text-align': 'center'}">
                            <ng-container *ngIf="col.columnName !== 'is_perfection'">
                                {{rowData[col.columnName]}}
                            </ng-container>
                            <ng-container *ngIf="col.columnName === 'is_perfection'">
                                <button *ngIf="rowData[col.columnName] > 0"
                                    style="border:0;text-align: center; width: 60px;background-color: #1F9E53;color: #fff;display:block;margin: auto;padding: 1px 1px;border-radius: 4px">已完善</button>
                                <button *ngIf="rowData[col.columnName] < 1"
                                    style="border:0;text-align: center; width: 60px;background-color: #F8E652;color: #333;display:block;margin: auto;padding: 1px 1px;border-radius: 4px">待完善</button>
                            </ng-container>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="paginatorleft" let-state>
                    第{{state.page + 1}} / {{state.totalRecords/state.rows | mathceil}}页
                </ng-template>
                <ng-template pTemplate="paginatorright" let-state>
                    共{{state.totalRecords}}条
                </ng-template>
            </p-table>

        </div>
    </div>
</div>
<p-confirmDialog #cd>
    <p-footer>
        <button type="button" pButton icon="fa fa-close" label="取消" (click)="cd.reject()"></button>
        <button type="button" pButton icon="fa fa-check" label="确定" (click)="cd.accept()"></button>
    </p-footer>
</p-confirmDialog>
